<template>
  <mivaLink :isNewTag="true" :to="detailPath" :title="title">
    <div class="article__module">
      <el-image :src="cover" class="article-cover__item" fit="cover" />
      <div class="article-info__group">
        <div :title="title" class="title__item">{{title}}</div>
        <div :title="mark" class="mark__item">{{mark}}</div>
        <div class="g-other">
          <span class="i-icon iconfont icon-shuju">{{article.hit||0|toTransfromTenThousand}}</span>
          <span class="i-icon iconfont icon-dianzan1">{{article.commentCount||0|toTransfromTenThousand}}</span>
        </div>
      </div>
    </div>
  </mivaLink>
</template>

<script>
export default {
    name: 'ArticleModule',
    props: {
        article: {
            type: Object,
            required: true,
        },
    },
    computed: {
        aid() {
            return this.article.aid;
        },
        detailPath() {
            return `/detailArticle/${btoa(this.aid)}`;
        },
        cover() {
            return `${this.article.cover}?x-oss-process=image/resize,m_fill,w_124,h_70` || '';
        },
        title() {
            return this.article.title || '没有标题';
        },
        mark() {
            const mark = this.article.mark || '没有简介...';
            return mark;
        },
    },
};
</script>

<style lang="less">
@coverHeight: 70px;

.article__module {
  width: calc(50% - 20px);
  height: @coverHeight + 10;
  margin: 9px;
  float: left;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  background-color: @base_color;
  box-shadow: 5px -5px 0px @base_color_2;
  transition: all 0.3s;
  color: #666;
  cursor: pointer;
  &:hover {
    background-color: @base_color_2;
    box-shadow: -5px 5px 0px @base_color;
  }
  .article-info__group{
    position: relative;
  }
  .article-cover__item {
    width: @coverHeight * (16 / 9);
    height: @coverHeight;
    border-radius: 4px;
    box-shadow: 0 0 1px #ddd;
    flex-shrink: 0;
    margin-right: 10px;
  }
  .title__item {
    width: @coverHeight * (16 / 9);
    margin-bottom: 3px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mark__item {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .g-other {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform-origin: left bottom;
    transform: scale(0.8);
  }
}
</style>
